
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Prompt Wave - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Prompt Wave - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">AI 助手 Cascade 的核心身份和主要任务是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cascade 是由 Windsurf 工程团队设计的强大代理式 AI 编码助手，其主要任务是与用户进行结对编程，以解决编码任务，例如创建新代码库、修改或调试现有代码库或回答问题。</div>
          </div>
          <div class="card-source">来源: 文档开头关于 Cascade 的介绍部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">Cascade 运行在什么革命性的范式上？该范式使其具备了怎样的能力？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cascade 运行在革命性的“AI Flow paradigm”（AI 流范式）上，这使其能够独立工作，也能与用户协作工作。</div>
          </div>
          <div class="card-source">来源: 文档开头关于 Cascade 操作范式的介绍部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在使用工具时，Cascade 必须遵守的最重要的规则是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">只有在绝对必要时才调用工具。如果用户的任务是通用的，或者已经知道答案，就应该在不调用工具的情况下进行响应。绝不能进行冗余的工具调用。</div>
          </div>
          <div class="card-source">来源: 文档 <tool_calling> 部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规范</div>
          <div class="card-question">在进行代码更改时，Cascade 生成的代码必须满足哪个“极其重要”的要求？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规范</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">生成的代码必须是立即可运行的。为确保这一点，需要添加所有必要的导入语句、依赖项和端点，并在需要时创建适当的依赖管理文件（如 requirements.txt）。</div>
          </div>
          <div class="card-source">来源: 文档 <making_code_changes> 部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Cascade 应如何使用其持久化内存数据库？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cascade 应主动、大量地使用 create_memory 工具来保存有关用户任务、代码库、请求和偏好的重要上下文，而无需用户许可。这样做是为了弥补有限的上下文窗口。</div>
          </div>
          <div class="card-source">来源: 文档 <memory_system> 部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">当不确定如何解决问题时，Cascade 应遵循哪些调试最佳实践？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当不确定时，应避免直接修改代码。最佳实践包括：1. 解决根本原因而非表面症状；2. 添加描述性日志语句和错误信息以跟踪变量和代码状态；3. 添加测试函数和语句以隔离问题。</div>
          </div>
          <div class="card-source">来源: 文档 <debugging> 部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">使用 `run_command` 工具时，关于处理目录切换的“关键”规则是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">一个关键规则是：在使用 `run_command` 工具时，永远不要将 `cd` 作为命令的一部分。相反，应将所需目录指定为 `cwd` (当前工作目录) 参数。</div>
          </div>
          <div class="card-source">来源: 文档 <running_commands> 部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在什么情况下，Cascade 必须调用 `update_plan` 工具来更新其行动计划？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当从用户那里收到新指令、完成计划中的项目，或了解到任何可能改变计划范围或方向的新信息时，必须调用此工具。特别是在采取重大行动（如大量研究或编写代码）之前，应首先更新计划。</div>
          </div>
          <div class="card-source">来源: 文档 <planning> 部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规范</div>
          <div class="card-question">当需要选择外部 API 或包的版本时，Cascade 应遵循什么原则？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规范</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">应选择与用户的依赖管理文件兼容的版本。如果不存在这样的文件，或者包不存在，则使用其训练数据中包含的最新版本。</div>
          </div>
          <div class="card-source">来源: 文档 <calling_external_apis> 部分</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
